<template>
    <div @click="handleShowPicker"
        style="border: 1px solid #f0f0f0;width: 130px;display: flex;align-items: center;padding: 4px 2px;border-radius: 4px;">
        <ColorPicker ref="Picker" style="flex-shrink: 0;width: 48px; height: 32px;border-radius: 4px;" roundHistory
            v-model:pureColor="pureColor" @pureColorChange="handleColorChange" format="hex6" shape="square"
            use-type="pure" :disableAlpha="true">
            <template #extra>
                <a-button style="margin: 0 auto; width: 100%;" type="primary" size="small"
                    @click="handleReset">重置</a-button>
            </template>
        </ColorPicker>
        <div style="font-size: 15px;">{{ pureColor }}</div>
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
const emits = defineEmits(['change'])
const { proxy } = getCurrentInstance() as any;
const pureColor = ref<string>("#1677ff");
const handleShowPicker = () => {
    proxy.$refs.Picker.showPicker = true
}
const handleReset = () => {
    pureColor.value = '#1677ff'
    proxy.$refs.Picker.showPicker = false
    emits('change', pureColor.value)
}
const handleColorChange = (_color: string) => {
    emits('change', pureColor.value)
}

</script>
<style lang="scss" scoped>
.vc-color-wrap .current-color {
    border-radius: 23px !important;
}
</style>